<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .miao {

            position: relative;
            width: 800px;
            height: 800px;
            border: 1px solid #000;
            border-radius: 50%;
            margin: 100px auto ;
        }
        .miao li {
            position: absolute;
            height: 21px;
            width: 55px;
        }
        .m1 {
            animation: m1 1s linear forwards;
        }
        @keyframes m1 {
            0% {
                left: 0;
                top: 0;
            }
            50% {
                left: 100%;
                top: 0;
            }
            100% {
                left: 100%;
                top: 50%;
                transform: translate(0,-50%);
            }
        } 
        .m2 {
            animation: m2 1s linear 1s forwards;
        }
        @keyframes m2 {
            0% {
                left: 0;
                top: 0;
            }
            50% {
                left: 100%;
                top: 0;
            }
            100% {
                left: 100%;
                top: 46.67%;
                transform: translate(0,-50%);
            }
        }
        .m3 {
            animation: m3 1s linear 2s forwards;
        }
        @keyframes m3 {
            0% {
                left: 0;
                top: 0;
            }
            50% {
                left: 100%;
                top: 0;
            }
            100% {
                left: 100%;
                top: 43.34%;
                transform: translate(0,-50%);
            }
        }
        .m4 {
            animation: m4 1s linear 3s forwards;
        }
        @keyframes m4 {
            0% {
                left: 0;
                top: 0;
            }
            50% {
                left: 100%;
                top: 0;
            }
            100% {
                left: 100%;
                top: 40.01%;
                transform: translate(0,-50%);
            }
        }
        .m5 {
            animation: m5 1s linear 4s forwards;
        }
        @keyframes m5 {
            0% {
                left: 0;
                top: 0;
            }
            50% {
                left: 100%;
                top: 0;
            }
            100% {
                left: 100%;
                top: 36.68%;
                transform: translate(0,-50%);
            }
        }
        .m6 {
            animation: m6 1s linear 5s forwards;
        }
        @keyframes m6 {
            0% {
                left: 0;
                top: 0;
            }
            50% {
                left: 100%;
                top: 0;
            }
            100% {
                left: 100%;
                top: 33.35%;
                transform: translate(0,-50%);
            }
        }
        .m7 {
            animation: m7 1s linear 6s forwards;
        }
        @keyframes m7 {
            0% {
                left: 0;
                top: 0;
            }
            50% {
                left: 100%;
                top: 0;
            }
            100% {
                left: 100%;
                top: 30.02%;
                transform: translate(0,-50%);
            }
        }
        .m8 {
            animation: m8 1s linear 7s forwards;
        }
        @keyframes m8 {
            0% {
                left: 0;
                top: 0;
            }
            50% {
                left: 100%;
                top: 0;
            }
            100% {
                left: 100%;
                top: 26.69%;
                transform: translate(0,-50%);
            }
        }
        .m9 {
            animation: m9 1s linear 8s forwards;
        }
        @keyframes m9 {
            0% {
                left: 0;
                top: 0;
            }
            50% {
                left: 100%;
                top: 0;
            }
            100% {
                left: 100%;
                top: 23.36%;
                transform: translate(0,-50%);
            }
        }
        .m10 {
            animation: m10 1s linear 9s forwards;
        }
        @keyframes m10 {
            0% {
                left: 0;
                top: 0;
            }
            50% {
                left: 100%;
                top: 0;
            }
            100% {
                left: 100%;
                top: 20.03%;
                transform: translate(0,-50%);
            }
        }
    </style>
</head>

<body>
    <!-- span.m${第$秒}*60  -->
    <ul class="miao">
        <li class="m1">第1秒</li>
        <li class="m2">第2秒</li>
        <li class="m3">第3秒</li>
        <li class="m4">第4秒</li>
        <li class="m5">第5秒</li>
        <li class="m6">第6秒</li>
        <li class="m7">第7秒</li>
        <li class="m8">第8秒</li>
        <li class="m9">第9秒</li>
        <li class="m10">第10秒</li>
        <li class="m11">第11秒</li>
        <li class="m12">第12秒</li>
        <li class="m13">第13秒</li>
        <li class="m14">第14秒</li>
        <li class="m15">第15秒</li>
        <li class="m16">第16秒</li>
        <li class="m17">第17秒</li>
        <li class="m18">第18秒</li>
        <li class="m19">第19秒</li>
        <li class="m20">第20秒</li>
        <li class="m21">第21秒</li>
        <li class="m22">第22秒</li>
        <li class="m23">第23秒</li>
        <li class="m24">第24秒</li>
        <li class="m25">第25秒</li>
        <li class="m26">第26秒</li>
        <li class="m27">第27秒</li>
        <li class="m28">第28秒</li>
        <li class="m29">第29秒</li>
        <li class="m30">第30秒</li>
        <li class="m31">第31秒</li>
        <li class="m32">第32秒</li>
        <li class="m33">第33秒</li>
        <li class="m34">第34秒</li>
        <li class="m35">第35秒</li>
        <li class="m36">第36秒</li>
        <li class="m37">第37秒</li>
        <li class="m38">第38秒</li>
        <li class="m39">第39秒</li>
        <li class="m40">第40秒</li>
        <li class="m41">第41秒</li>
        <li class="m42">第42秒</li>
        <li class="m43">第43秒</li>
        <li class="m44">第44秒</li>
        <li class="m45">第45秒</li>
        <li class="m46">第46秒</li>
        <li class="m47">第47秒</li>
        <li class="m48">第48秒</li>
        <li class="m49">第49秒</li>
        <li class="m50">第50秒</li>
        <li class="m51">第51秒</li>
        <li class="m52">第52秒</li>
        <li class="m53">第53秒</li>
        <li class="m54">第54秒</li>
        <li class="m55">第55秒</li>
        <li class="m56">第56秒</li>
        <li class="m57">第57秒</li>
        <li class="m58">第58秒</li>
        <li class="m59">第59秒</li>
        <li class="m60">第60秒</li>
    </ul>
    

</body>
</html>